<template>
    <div id="index">
        <!--轮播-->
        <!--        <el-carousel ref="carousel"-->
        <!--                     arrow="always"-->
        <!--                     :autoplay="false"-->
        <!--                     indicator-position="none"-->
        <!--                     height="100vh"-->
        <!--                     @change="viewChange">-->
        <!--            <el-carousel-item name="view1">-->
        <!--                <view1 v-if="currentView=='view1'"/>-->
        <!--            </el-carousel-item>-->
        <!--            <el-carousel-item name="view3">-->
        <!--                <view3 v-if="currentView=='view3'"/>-->
        <!--            </el-carousel-item>-->
        <!--            <el-carousel-item name="view2">-->
        <!--                <view2 v-if="currentView=='view2'"/>-->
        <!--            </el-carousel-item>-->
        <!--            <el-carousel-item name="view4">-->
        <!--                <view4 v-if="currentView=='view4'"/>-->
        <!--            </el-carousel-item>-->
        <!--        </el-carousel>-->
        <van-swipe ref="vanSwipe"
                   :autoplay="0"
                   :show-indicators="false"
                   :height="vanSwiperViewH"
                   @change="viewChange">
            <van-swipe-item>
                <view1 v-if="currentView==='view1'"/>
            </van-swipe-item>
            <van-swipe-item>
                <view2 v-if="currentView==='view2'"/>
            </van-swipe-item>
            <van-swipe-item>
                <view3 v-if="currentView==='view3'"/>
            </van-swipe-item>
            <van-swipe-item>
                <view4 v-if="currentView==='view4'"/>
            </van-swipe-item>
        </van-swipe>
        <van-icon name="arrow-left"
                  class="swipe-arrow arrow-left" @click="arrowClick('prev')"/>
        <van-icon name="arrow"
                  class="swipe-arrow arrow-right" @click="arrowClick('next')"/>
    </div>
</template>

<script>
import view1 from "@/components/echart/view1/index";
import view2 from "@/components/echart/view2/index";
import view3 from "@/components/echart/view3/index";
import view4 from "@/components/echart/view4/index";

export default {
    data() {
        return {
            currentView: '',
            viewIndex: 0,
            vanSwiperViewH: 0,
        };
    },
    components: {
        view1,
        view2,
        view3,
        view4,
    },
    mounted() {
        this.initView();
    },
    methods: {
        initView() {
            let containerSpec = this.selfUtils.getViewportSize();
            this.vanSwiperViewH = containerSpec.height;
            this.$nextTick(() => {
                this.setViewIndex();
            })
        },
        setViewIndex() {
            if (this.$route.params.index) {
                this.viewIndex = this.$route.params.index;
                this.$nextTick(() => {
                    this.$refs.vanSwipe.swipeTo(this.$route.params.index);
                })
            }
            this.currentView = `view${this.viewIndex + 1}`;
        },
        arrowClick(direction) {
            this.$refs.vanSwipe[direction]();
        },
        viewChange(newV) {
            this.viewIndex = newV;
            this.currentView = `view${newV + 1}`;
        }
    }
};
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
</style>
<style lang="scss">
#index {
    .host-body {
        .body-box {
            .chart-view-box{
                //padding: 0;
            }
        }
    }
}

.swipe-arrow {
    width: 0.7rem;
    height: 0.7rem;
    line-height: 0.7rem;
    text-align: center;
    font-size: 0.35rem;
    color: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    position: fixed;
    top: 50%;
    background: transparent; //rgba(255,255,255,0.05);
    z-index: 1000;
    cursor: pointer;
}

.arrow-left {
    left: 0;
}

.arrow-right {
    right: 0;
}
</style>